<template>
  <div class='container'>
    <el-card class="box-card">
      <div  slot="header" class="clearfix">
        <h2 style="display:inline-block">精选题库</h2>
        <el-button @click="$router.push('new')" type="danger" style="float: right;">新增试题</el-button>
      </div>
      <el-form size="small" label-width="100px" :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="学科">
          <el-select @change="getCatelog(form.subjectID)" v-model="form.subjectID" placeholder="请选择">
            <el-option v-for="item in subList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <el-option v-for="item in cateList" :key="item.id" :label="item.directoryName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select v-model="form.tags" placeholder="请选择">
            <el-option v-for="item in tagList" :key="item.id" :label="item.tagName" :value="item.tagName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="form.keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select v-model="form.questionType" placeholder="请选择">
            <el-option v-for="item in questionTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select v-model="form.difficulty" placeholder="请选择">
            <el-option v-for="item in difficultyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option v-for="(item,index) in directionList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select v-model="form.creatorID" placeholder="请选择">
            <el-option v-for="item in creatorList" :key="item.id" :label="item.username" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注">
          <el-input v-model="form.remarks" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input v-model="form.shortName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select @change="getCitysList" style="width:100px" v-model="form.province" placeholder="请选择">
            <el-option v-for="(item,index) in provincesList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <el-select style="width:100px" v-model="form.city" placeholder="请选择">
            <el-option v-for="(item,index) in citysList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="clearAll">清除</el-button>
          <el-button type="primary" @click="searchQus">查询</el-button>
        </el-form-item>
      </el-form>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="3"></el-tab-pane>
        <el-tab-pane label="待审核" name="0"></el-tab-pane>
        <el-tab-pane label="已审核" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
      </el-tabs>
        <el-alert
          :title="`获取文章列表成功,共${totalNum}条数据`"
          type="success">
        </el-alert>
    </el-card>
    <el-table
      :data="qusList"
      style="width: 100%"
      class="control"
      >
      <el-table-column
        prop="number"
        label="试题编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="50">
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录"
        width="70">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="50"
        >
        <template #default="{row}">
          {{row.questionType | questionsFilter}}
        </template>
      </el-table-column>
      <el-table-column
        prop="question"
        label="题干">
        <template #default="{row}">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        width="100">
        <template #default="{row}">
          {{row.addDate | parseTimeByString}}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="60">
        <template #default="{row}">
          {{row.difficulty | difficultyFilter}}
        </template>
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="90">
      </el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="90">
        <template #default="{row}">
          {{row.chkState | chkFilter}}
        </template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="90">
      </el-table-column>
      <el-table-column
        prop="chkUser"
        label="审核人"
        width="90">
      </el-table-column>
      <el-table-column
        prop="publishState"
        label="发布状态"
        width="90">
        <template #default="{row}">
          {{row.publishState | publishFilter}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="250"
        class="control"
        fixed="right"
        >
        <template #default="{row}">
          <el-button @click.stop="showPre(row)" type="primary" round>预览</el-button>
          <el-button @click="checkQus(row.id)" :disabled="row.chkState!==0" type="success" round>
            审核
          </el-button>
          <el-button @click="$router.push({path:'new',query:{ id:row.id }})" :disabled="row.publishState===1" type="warning" round>修改</el-button>
          <el-button @click="togglePut(row.id,row.publishState===1?0:1)" type="danger" round>
            {{row.publishState===1?'下架':'上架'}}
          </el-button>
          <el-button @click="removeChoice(row.id)" type="info" round>移除</el-button>
          <el-button @click="delQus(row.id)" :disabled="row.publishState===1" round>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum">
    </el-pagination>
    <!-- <QuestionsPre :queDetail="queDetail" @closePre="closePre" :dialogVisible="dialogVisible"></QuestionsPre> -->
    <QuestionsPre :options="options" :queDetail="queDetail" @closePre="closePre" :dialogVisible="dialogVisible"></QuestionsPre>
    <QuestionsCheck :checkId='checkId' @closeCheck='closeCheck' :checkVisible="checkVisible"></QuestionsCheck>
  </div>
</template>

<script>
import { choice as getQusList, choiceAdd, remove, choicePublish, detail } from '@/api/hmmm/questions.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { list as getSubList, simple as getSimList } from '@/api/hmmm/subjects.js'
import { list as getCatelogList } from '@/api/hmmm/directorys.js'
import { list as getTagsList } from '@/api/hmmm/tags.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { simple as getUsers } from '@/api/base/users.js'
import QuestionsPre from '../components/questions-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
export default {
  components: {
    QuestionsPre,
    QuestionsCheck
  },
  data () {
    return {
      activeName: '3',
      queDetail: {},
      dialogVisible: false,
      checkVisible: false,
      checkId: null,
      pagesize: 10,
      page: 1,
      totalNum: 0,
      province: '',
      options: [],
      qusList: [],
      subList: [], // 学科渲染的列表
      cateList: [], // 二级目录
      tagList: [], // 标签列表
      difficultyList: difficulty, // 难度
      questionTypeList: questionType, // 试题类型
      directionList: direction, // 方向
      creatorList: [], // 录入人列表
      provincesList: [], // 城市列表
      citysList: [], // 区域列表
      form: {
        keyword: null, //!
        catalogID: null, //!
        city: null, //!
        creatorID: null, //!
        difficulty: null, //!
        direction: null, //!
        questionType: null, //!
        remarks: null, //!
        subjectID: null, //!
        tags: null, //!
        province: null, //!
        shortName: null, //!
        chkState: null
      }
    }
  },
  created () {
    this.getInfo()
    this.getProvincesList()
  },
  methods: {
    // 切换tab
    handleClick (tab, event) {
      console.log(tab.name, event)
      if (tab.name === '3') {
        this.form.chkState = null
        return this.getRenerInfo()
      }
      this.toggleRender(tab.name)
    },
    // 切换tabFn
    toggleRender (state) {
      this.form.chkState = state
      this.getRenerInfo()
    },
    // 审核
    checkQus (id) {
      console.log(id)
      this.checkVisible = true
      this.checkId = id
    },
    // 关闭审核
    closeCheck () {
      this.checkVisible = false
      this.getRenerInfo()
    },
    // 删除
    delQus (id) {
      this.$confirm('此操作将永久删除此题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 1. 发送请求
        remove({ id }).then(({ data }) => {
          console.log(data)
          this.$message.success('删除成功')
          this.getRenerInfo()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 切换上下架
    togglePut (id, publishState) {
      this.$confirm(`${publishState === 1 ? '是否确定上架' : '是否确定下架'}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        choicePublish({ id, publishState })
          .then(({ data }) => {
            console.log(data)
            this.$message.success('操作成功')
            this.getRenerInfo()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 移除精选
    removeChoice (id) {
      choiceAdd({ id, choiceState: 0 })
        .then(() => {
          this.$message.success('移除成功')
          this.getRenerInfo()
        })
    },
    // 带索引搜索
    searchQus () {
      this.getRenerInfo()
    },
    // 清除搜索信息
    clearAll () {
      this.form = {
        keyword: null, //!
        catalogID: null, //!
        city: null, //!
        creatorID: null, //!
        difficulty: null, //!
        direction: null, //!
        questionType: null, //!
        remarks: null, //!
        subjectID: null, //!
        tags: null, //!
        province: null, //!
        shortName: null //!
      }
      this.getRenerInfo()
    },
    // 获取学科简单列表
    getInfo () {
      Promise.all(
        [
          getSimList(),
          getSubList(),
          getUsers(),
          getQusList({ page: this.page, pagesize: this.pagesize })
        ]
      ).then(result => {
        // console.log(result)
        this.subList = result[0].data
        this.qusList = result[1].data.items
        this.totalNum = result[1].data.counts
        this.creatorList = result[2].data
        this.qusList = result[3].data.items
        this.totalNum = result[3].data.counts
        console.log(this.qusList)
      })
    },
    // 获取页面渲染信息
    getRenerInfo () {
      getQusList({ ...this.form, page: this.page, pagesize: this.pagesize })
        .then(({ data }) => {
          this.qusList = data.items
          this.totalNum = data.counts
          console.log(this.qusList)
        })
    },
    // 获取二级目录跟标签
    getCatelog (subjectID) {
      // 重新获取之前把之前的数据清空
      this.form.catalogID = null
      this.form.tags = null
      // 获取二级目录
      getCatelogList({ subjectID }).then(({ data }) => {
        this.cateList = data.items
      })
      // 获取二级标签
      getTagsList({ subjectID }).then(({ data }) => {
        this.tagList = data.items
      })
    },
    // 获取一级城市
    getProvincesList () {
      this.provincesList = provinces()
    },
    // 获取二级城市
    getCitysList () {
      this.form.city = null
      this.citysList = citys(this.form.province)
    },
    // 展示预览
    showPre (queDetail) {
      console.log(queDetail)
      detail({ id: queDetail.id }).then(({ data }) => {
        console.log(data)
        if (data.options) {
          console.log(data.options)
          this.options = data.options
        }
      })
      this.dialogVisible = true
      this.queDetail = queDetail
      // this.$nextTick(() => {
      //   this.queDetail = queDetail
      // })
    },
    closePre () {
      this.dialogVisible = false
    },
    // 切换页码
    handleSizeChange (val) {
      this.page = 1
      this.pagesize = val
      this.getRenerInfo()
      console.log(`每页 ${val} 条`)
    },
    // 切换页面
    handleCurrentChange (val) {
      this.page = val
      this.getRenerInfo()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped lang='scss'>
.mont{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.3);
    .video{
      width: 50%;
      height: 50%;
      text-align: center;
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      video{
        width: 100%;
        height: 80%;
      }
      .closeVideo{
        font-size: 80px;
        color: #8df;
      }
    }
}
::v-deep .control{
  .el-button{
    width: 40px;
    height: 20px;
    padding: 0;
    font-size: 12px;
  }
}
</style>
